import React,{useEffect,useState} from "react";
import { useSearchParams } from "react-router-dom";
import '../Cate/Edit.css'
import { Carousel } from 'antd'
import { CartO, ChatO, StarO  } from '@react-vant/icons'
import { ActionBar } from 'react-vant'
import { Space } from 'react-vant'
import { ArrowLeft } from '@react-vant/icons'
import { Button, ConfigProvider, Flex } from 'antd';
import { useResponsive } from 'antd-style';
import { useNavigate } from "react-router-dom";
import { Cell, Popup, } from 'react-vant'
import { Stepper,Toast } from 'react-vant'
import { message } from 'antd';
import axios from "axios";
axios.defaults.baseURL = 'http://127.0.0.1:3000/';
export default function Edit(){
    const [ SearchParams ] = useSearchParams()
    const _id = SearchParams.get('_id')
    const name = SearchParams.get('name')
    const imgs = SearchParams.get('EditImg')
    const store = SearchParams.get('store')
    const xiao = SearchParams.get('xiao')
    const Sincerely = SearchParams.get('Sincerely')
    const specs = SearchParams.get('specs')
    const price = SearchParams.get('price') 
    const img = SearchParams.get('img')
    const stock = SearchParams.get('stock')
    const count = SearchParams.get('count')
    console.log(_id);
    

    const [value9, setValue9] = useState(0)
    const BuyQuantity = value9
    console.log(BuyQuantity);


    const str = imgs
    const arr = str.split(',')

    const Navigate = useNavigate()

    const [state, setState] = useState('')
    const [state2, setState2] = useState('')
    const onClose = () => setState('')
    const onClose2 = () => setState2('')
    
    const back = () => {
        Navigate(-1)
    }

    const to = () => {
        Navigate(`/confrim?img=${img}&name=${name}&specs=${specs}&price=${price}&BuyQuantity=${BuyQuantity}&_id=${_id}`)
    }

    const addCart = async() => {
        let obj = {img:img,name:name,specs:specs,price:price,count:BuyQuantity}
        let {data:{code}}=await axios.post('/sUnJIahuI/addCart',obj)
        if(code === 200){
            message.success("加入成功")
            Navigate('/show/cart')
        }
    }
    
    
    useEffect(()=>{

    },[])

    return(
        <>
            <div className="EditBigBox">
                <div className="EditTopBox">
                    <Space className='c' gap={20} onClick={()=>back()}>
                        <ArrowLeft fontSize={"0.7rem"} />
                    </Space>
                    <Button color="default" variant="outlined" className="TopBoxButton">
                        商品详情
                    </Button>
                </div>
                <div className="EditContentBox">
                    <Carousel autoplay>
                        {
                            arr.map((item)=>{
                                return <img key={item} src={item}></img>
                            })
                        }
                    </Carousel>
                    <div className="EditContentBox2">
                        <p className="contentText1">{name}/{specs}枝</p>
                        <p>
                            <span className="contentText2">￥{price}</span>
                            <span className="contentText3">销量：{xiao}笔</span>
                        </p>
                        <p className="contentText4">
                            <span className="contentText5">已选</span>
                            <span className="contentText6">60-65cm | 3支</span>
                        </p>
                        <p className="contentText7">
                            <span className="contentText8">配送</span> 
                            <span className="contentText9">点击添加地址，查看花花到家时间</span>
                        </p>
                        <p className="contentText10">
                            <span className="contentText11">保障</span>
                            <span className="contentText12">三天无理由保障，极速退款</span>
                        </p>
                        <p className="contentText13">
                            {Sincerely}
                        </p>
                    </div>
                </div>
                <div className="EditBottomBox">
                    <div className='demo-action-bar'>
                        <ActionBar>
                            <ActionBar.Icon icon={<ChatO />} text='客服' />
                            <ActionBar.Icon icon={<CartO />} text='购物车' />
                            <ActionBar.Icon icon={<StarO  />} text='收藏' />
                            <ActionBar.Button type='warning' text='加入购物车' color="#cceed0" onClick={() => setState('bottom')}/>
                            <ActionBar.Button type='danger' text='立即购买' color="#8fc594" onClick={() => setState2('bottom')}/>
                        </ActionBar> 
                        <Popup
                            visible={state === 'bottom'}
                            style={{ height: '8rem' }}
                            position='bottom'
                            onClose={onClose}
                        >
                            <div className="popupBox">
                                <div><img src={img} width={"65vw"} height={"65vh"} className="popupBoxImg"></img></div>
                                <div className="popupTextBox">
                                    <p className="popupPrice">￥{price}</p>
                                    <p className="popupStock">库存{stock}</p>
                                </div>
                            </div>
                            <div className="popupBox2">
                                <p>枝束</p>
                                <Button type="primary" style={{ backgroundColor:"#9cb87c",width:"3rem",position:"relative",top:"0.08rem" }}>{specs}枝/扎</Button>
                                <p style={{ position:"relative",top:"1.5vh" }}>等级</p>
                                <Button type="primary" style={{ backgroundColor:"#9cb87c",width:"3rem",position:"relative",top:"0.25rem" }}>60-65cm</Button>
                            </div>
                            <div className="popupBox3">
                                <Cell title="购买数量" center>
                                    <Stepper
                                    min={0}
                                    value={value9}
                                    onChange={v => {
                                        setValue9(v)
                                    }}
                                    />
                                </Cell>
                            </div>
                            <div className="popupBox4">
                                <Button type="primary" style={{ backgroundColor:"#9cb87c",width:"7rem",height:"0.8rem",position:"relative",top:"0.2rem" }}
                                onClick={()=>addCart()}>确定</Button>
                            </div>
                        </Popup>
                        <Popup
                            visible={state2 === 'bottom'}
                            style={{ height: '8rem' }}
                            position='bottom'
                            onClose={onClose2}
                        >
                            <div className="popupBox">
                                <div><img src={img} width={"65vw"} height={"65vh"} className="popupBoxImg"></img></div>
                                <div className="popupTextBox">
                                    <p className="popupPrice">￥{price}</p>
                                    <p className="popupStock">库存{stock}</p>
                                </div>
                            </div>
                            <div className="popupBox2">
                                <p>枝束</p>
                                <Button type="primary" style={{ backgroundColor:"#9cb87c",width:"3rem",position:"relative",top:"0.08rem" }}>{specs}枝/扎</Button>
                                <p style={{ position:"relative",top:"1.5vh" }}>等级</p>
                                <Button type="primary" style={{ backgroundColor:"#9cb87c",width:"3rem",position:"relative",top:"0.25rem" }}>60-65cm</Button>
                            </div>
                            <div className="popupBox3">
                                <Cell title="购买数量" center>
                                    <Stepper
                                    min={0}
                                    value={value9}
                                    onChange={v => {
                                        setValue9(v)
                                    }}
                                    />
                                </Cell>
                            </div>
                            <div className="popupBox4">
                                <Button type="primary" style={{ backgroundColor:"#9cb87c",width:"7rem",height:"0.8rem",position:"relative",top:"0.2rem" }}
                                onClick={()=>to()}>确定</Button>
                            </div>
                        </Popup>
                    </div>
                </div>
            </div>
        </>
    )
}